<template>
    <div class="login" id="login">
        <div class="w500px h600px p24px box-border box-center">
            <el-form :model="form" label-width="80px">
                <el-form-item class="mt24px" label="用户名">
                    <el-input v-model="form.name" />
                </el-form-item>
                <el-form-item class="mt24px" label="密码">
                    <el-input v-model="form.password" />
                </el-form-item>
                <el-form-item class="mt24px" label="验证码">
                    <el-input v-model="form.code" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">Create</el-button>
                    <el-button>Cancel</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script lang="ts">
// ref,, onUnmounted
import { defineComponent, onMounted, reactive } from 'vue';
import { run } from './jsi-cherry-container.js';

export default defineComponent({
    name: 'FallingPetal',

    setup() {
        onMounted(() => {
            run(document.getElementById('login'));
        });
        const form = reactive({
            name: '',
            password: '',
            code: '',
        });
        const onSubmit = () => {
            console.log('onSubmit');
        };
        return { form, onSubmit };
    },
});
</script>

<style scoped lang="scss">
.login {
    position: relative;
    // z-index: -1;
    /* width: 100px; */
    height: 100vh;
    background-color: #000000;
    overflow: hidden;
    .box-center {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: rgba(255, 255, 255, 0.7);
        border-radius: 10px;
    }
    ::v-deep .el-form-item__label {
        color: #000000;
    }
    ::v-deep .el-input__wrapper {
        border: none;
        border-radius: 0;
        border-bottom: 1px solid #000000;
        background: none;
        box-shadow: none;
    }
}
</style>
